<template>
	<div style="margin: 55px 0px 0px 20px; padding-bottom: 120px;">
		<!-- 选项卡切换 -->
		<el-tabs style="height: 60px;" @tab-click="changeTab" v-model="tab">
			<el-tab-pane :label="item.name" :name="item.type" v-for="(item,index) in tabs"></el-tab-pane>
		</el-tabs>
		<!-- 按钮 -->
		<el-form :inline="true">
			<el-form-item>
				<el-button size="mini" type="success" @click="$router.push('/demo/addgoods')">发布商品</el-button>
			</el-form-item>
			<el-form-item>
				<el-button size="mini" type="danger" @click="delGoods">批量删除</el-button>
			</el-form-item>
			<el-form-item>
				<el-button size="mini" @click="changeStatus(1)">上架</el-button>
			</el-form-item>
			<el-form-item>
				<el-button size="mini" @click="changeStatus(0)">下架</el-button>
			</el-form-item>
			<el-form-item>
				<el-input size="mini" placeholder="要搜索的商品名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="mini" type="info">搜索</el-button>
			</el-form-item>
		</el-form>
		<!-- 商品列表 -->
		<el-table ref="multipleTable" :data="goodslist" tooltip-effect="dark" style="width: 100%" border @selection-change="selectChange">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column label="商品" width="300">
				<template slot-scope="scope">
					<div style="display: flex ;">
						<el-image :src="scope.row.cover" style="width: 60px; height: 60px" />
						<ul class="right_name">
							<li>{{ scope.row.title }}</li>
							<li style="margin-top: 10px;">分类:{{ scope.row.category.name }}</li>
							<li>时间:{{ scope.row.create_time }}</li>
						</ul>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="实际销量" width="70">
				<template slot-scope="scope">
					<span>{{scope.row.discount}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="商品状态" width="80">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" v-if="scope.row.status==0">仓库</el-button>
					<el-button size="mini" type="success" v-else>上架</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="审核状态" width="120">
				<template slot-scope="scope">
					<el-button v-show="scope.row.ischeck==0" size="mini" type="success" @click="checkStatus({id:scope.row.id})">审核通过</el-button>
					<el-button v-show="scope.row.ischeck==0" size="mini" type="danger" @click="checkStatus({id:scope.row.id,status:2})">审核拒绝</el-button>
					<span v-show="scope.row.ischeck==1">通过</span>
					<span v-show="scope.row.ischeck==2">拒绝</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="总库存" width="90">
				<template slot-scope="scope">
					<span>{{scope.row.stock}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="价格(元)" width="140">
				<template slot-scope="scope">
					<span style="color: red;font-size: 14px;">￥{{scope.row.min_oprice}}</span>
					<span>/</span>
					<span style="font-size: 14px;">￥{{scope.row.min_price}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="mini">基础设置</el-button>
					<el-button type="text" size="mini">商品规格</el-button>
					<el-button type="text" size="mini">商品属性</el-button>
					<el-button type="text" size="mini">媒体设置</el-button>
					<el-button type="text" size="mini">商品详情</el-button>
					<el-button type="text" size="mini">折扣设置</el-button>
					<el-button type="text" size="mini">删除商品</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination style="
		position: absolute;
		bottom: 0px;
		background-color: #fff;
		margin-left: -20px;
		z-index: 100;
		width: 100%;
		padding: 20px;
		border: 1px solid #dddddd;
		box-sizing: border-box;
		"
		 @size-change="changesize" @current-change="changepage" :current-page="page" :page-sizes="[10,20,30,40,]" :page-size="limit"
		 layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: "demo",
		// 组件参数 接收来自父组件的数据
		props: [],
		// 局部注册的组件
		components: {},
		// 组件状态值
		data() {
			return {
				// 商品列表
				goodslist: [],
				// 设置关键字
				title: "",
				// 分页
				page: 1,
				limit: 10,
				total: 0,

				// 订单类型
				tabs: [{
						name: "全部",
						type: "all"
					},
					{
						name: "审核中",
						type: "checking"
					},
					{
						name: "出售中",
						type: "saling"
					},
					{
						name: "已下架",
						type: "off"
					},
					{
						name: "库存预警",
						type: "min_stock"
					},
					{
						name: "回收站",
						type: "delete"
					},
				],
				tab: "all",
				cates: [],

				// 批量操作数据的数组
				ids: [],
			};
		},
		mounted() {
			this.getGoods();
		},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			// 获取商品列表
			getGoods() {
				this.$axios
					.get(
						`/api/goods/${this.page}?limit=${this.limit}&title=${this.title}&tab=${this.tab}`
					)
					.then((res) => {
						console.log(res);
						this.goodslist = res.data.list;
						this.cates = res.data.cates;
						this.total = res.data.totalCount;
					})
					.catch((error) => {
						console.log(error);
					});
			},
			// 分页
			changesize(size) {
				this.limit = size;
				this.getGoods();
			},
			changepage(page) {
				this.page = page;
				this.getGoods();
			},
			// 点击切换分类
			changeTab(key) {
				console.log(key.name)
				console.log(this.tab)
				this.getGoods();
			},
			// 当列表选中状态
			selectChange(table) {
				console.log(table)
				let ids = [];
				table.forEach(item => {
					ids.push(item.id);
				})
				this.ids = ids;
			},
			// 商品上架 下架
			changeStatus(status) {
				if (this.ids.length == 0) {
					this.$message.error("您还未选中任何商品哦")
					return false
				}
				this.$axios.post('/api/goods/changestatus', {
					ids: this.ids,
					status: status
				}).then(res => {
					console.log(res)
					this.getGoods();
				}).catch(error => {

				})
			},
			// 批量删除
			delGoods() {
				this.$confirm('确定删除', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post('/api/goods/delete_all', {
						ids: this.ids
					}).then(res => {
						console.log(res)
						this.getGoods();
					})
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			// 审核状态
			checkStatus({
				id,
				status = 1
			}) {
				console.log(id, status)
				this.$axios.post(`/api/goods/${id}/check`, {
					ischeck: status
				}).then(res => {
					this.getGoods();
				})
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {},
	};
</script>

<style lang="scss" scoped>
	.el-container {
		width: 100%;
		height: 100%;
	}

	.right_name {
		padding: 0px;
		margin: 0px;
		list-style: none;
		margin-left: 10px;
	}
</style>
